<template>
  <div style="width: 400px">
    <el-input v-model="id" style="display: none"></el-input>
    <el-input v-model="name" readonly placeholder="请选择车型配置" :disabled="readonly" @clear="handleClear">
      <template #append>
        <el-button class="button" @click="selectRow" :disabled="readonly">选择车型配置</el-button>
      </template>
    </el-input>
  </div>
  <!--物料批次选择对话框-->
  <CarModelConfigSelectDialogComponent ref="selectDialog" @afterSubmit="afterSelect" @dialogClosed="emit('closed')" />
</template>

<script setup lang="ts">
import CarModelConfigSelectDialogComponent from '@/components/mes/CarModelConfigSelectDialogComponent.vue';
import type { CarModelConfig } from '@/types/interface/mes_interface';
import { ref } from 'vue';

const emit = defineEmits(['update:modelValue', 'afterSelect', 'afterClickSelectButton', 'closed']); // 定义自定义事件
interface Props {
  readonly?: boolean; //是否只读，只读的话选择框不可用。
}
const props = withDefaults(defineProps<Props>(), {
  readonly: false
});
//车型配置id
const id = defineModel<string | null>({
  required: false,
  default: null
});
//车型配置名称
const name = defineModel<string | null>('name', {
  required: false,
  default: null
});

//物料批次选择对话框
const selectDialog = ref();
//点击摊开选择对话框
const selectRow = async () => {
  //在点击选择按钮后，先清空表单验证
  emit('afterClickSelectButton');
  //打开表格选择对话框
  await selectDialog.value.openDialog();
};
//获取在选择框选择的物料批次
const afterSelect = (carmodelconfigs: CarModelConfig[]) => {
  //将在表格中选中的记录返回
  if (carmodelconfigs.length > 0) {
    id.value = carmodelconfigs[0].id!;
    name.value = `${carmodelconfigs[0].name}` + `（车型：${carmodelconfigs[0].carModel!.name}）`;
  }
  //将记录继续向上抛出
  emit('afterSelect', carmodelconfigs);
};
//清空选择物料批次
const handleClear = () => {
  id.value = null;
};
</script>

<style scoped></style>
